import { Skeleton } from 'antd';

import { Tooltip } from '@/components/eai-design';
import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';

import DonutPieChart from '../components/DonutPieChart';

interface FrequencyProps {
  frequencyData: {
    fileTotal: number;
    isRise: boolean;
    period_total: number;
    highFrequency: number;
    lowFrequency: number;
    risePercent: number | '-';
  };
  statisticsLoading: boolean;
  tooltipMap: Record<string, string>;
  activeRange: string;
}
const frequency = ({
  frequencyData,
  statisticsLoading,
  tooltipMap,
  activeRange,
}: FrequencyProps) => {
  return (
    <div className=" w-1/2 rounded-default bg-white p-4">
      <div className="mb-2 flex items-center text-xl font-semibold">
        <div className="mr-2 h-3 w-3  rounded-full border-[3px] border-[#1B6DFA]" />
        文档引用频次
      </div>
      <div className="flex gap-2">
        <div className="w-1/2 rounded-md  bg-fill-1 p-4 pt-2 text-text-4">
          <div className="flex items-center text-sm ">
            <SvgIcon size={16} icon="report-is-document" className="mr-1" />
            文档数
            <Tooltip title={tooltipMap.document}>
              <div className="flex">
                <SvgIcon size={16} icon="report-is1" className="ml-1" />
              </div>
            </Tooltip>
          </div>
          <div className=" flex items-center justify-between gap-4">
            <div className="  w-full rounded-md  text-text-4 ">
              <div className="my-1">
                <span className="mr-1 text-2xl font-extrabold text-text-5">
                  {frequencyData.fileTotal}
                </span>
              </div>
              <div className="flex items-center">
                <span className="text-sm text-text-4">
                  {activeRange === '7days' ? ' 本周' : activeRange === '30days' ? '本月' : ''}
                  {frequencyData.isRise ? '增加' : '减少'}
                  {frequencyData.period_total}个文档
                  <SvgIcon
                    size={16}
                    icon={frequencyData.isRise ? 'report-is-top ' : 'report-is-bottom'}
                  />
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="w-1/2 rounded-md  bg-fill-1 p-4 pt-2 text-text-4">
          <div className="flex items-center text-sm ">
            <SvgIcon size={16} icon="report-is-gao" className="mr-1" />
            高频文档占比
            <Tooltip title={tooltipMap.documentProportion}>
              <div className="flex">
                <SvgIcon size={16} icon="report-is1" className="ml-1" />
              </div>
            </Tooltip>
          </div>
          <div className=" flex items-center justify-between gap-4">
            <div className="  w-full rounded-md  text-text-4 ">
              <div className="my-1">
                <span className="mr-1 text-2xl font-extrabold text-text-5">
                  {frequencyData.highFrequency}%
                </span>
              </div>
              <div className="flex items-center">
                <span className="text-sm text-text-4">
                  {activeRange === '7days' ? ' 周' : activeRange === '30days' ? '月' : ''}
                  环比
                  <span
                    className={` px-1 ${frequencyData.isRise ? 'text-[#0AA664]' : 'text-error'}
                        `}
                  >
                    {frequencyData.risePercent !== '-' &&
                    frequencyData.risePercent !== 0 &&
                    frequencyData.isRise
                      ? '+'
                      : '-'}
                    {frequencyData.risePercent == '-' ? '' : `${frequencyData.risePercent * 100}%`}
                  </span>
                </span>

                {frequencyData.risePercent !== '-' && frequencyData.risePercent !== 0 && (
                  <SvgIcon
                    size={16}
                    icon={frequencyData.isRise ? 'report-is-top ' : 'report-is-bottom'}
                  />
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-6">
        {statisticsLoading ? (
          <Skeleton active paragraph={{ rows: 5 }} style={{ padding: '10px' }} />
        ) : (
          <div>
            {frequencyData.highFrequency !== 0 || frequencyData.lowFrequency !== 0 ? (
              <DonutPieChart
                expiredPercent={frequencyData.highFrequency}
                normalPercent={frequencyData.lowFrequency}
                prevExpiredPercent={undefined}
                expiredLabel="高频文档"
                normalLabel="中低频文档"
                height={200}
              />
            ) : (
              <div className="h-[200px]">
                <NotData />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
export default frequency;
